<template>
  <div class="goods-list p-2">
    <div>
      <div class="flex gap-2 items-center mb-3">
        <span>{{ t["选择屏幕"] }}</span>
        <a-button
          v-for="(item, key) in dispatchParams.goodsList"
          :key="key"
          :value="item.label"
          :type="dispatchParams.currentScreen === item.label ? 'primary' : 'secondary'"
          @click="selectScreen(item)"
        >
          <span class="label"> {{ item.label }} </span>
        </a-button>
      </div>
      <ProductSelector
        @cellClick="selectGoods"
        :disabled="!dispatchParams.templateId"
        v-model:keys="dispatchParams.selectedGoods"
      />
      <PreviewProduct :list="dispatchParams.selectedGoods" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Goods } from "@/api/service/goods/types";

import { dispatchParams } from "./form";

const t = translate("公共模块");

const selectScreen = (item: any) => {
  dispatchParams.value.currentScreen = item.label;
  if (item.value) {
    dispatchParams.value.selectedGoods = [item.value];
  } else {
    dispatchParams.value.selectedGoods = [];
  }
};

const selectGoods = async (item: Goods) => {
  dispatchParams.value.goodsList.forEach((v) => {
    if (v.label === dispatchParams.value.currentScreen) {
      if (dispatchParams.value.currentScreen === v.label) {
        v.value = item.goodsId;
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.goods-list {
  width: 400px;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.label {
  text-transform: uppercase;
}
</style>
